<!DOCTYPE html>
<html>
<head>
    <title>快递查找结果</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <link href="css/normalize.css" type="text/css" rel="stylesheet"/>
    <link href="css/common.css" type="text/css" rel="stylesheet"/>
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="js/common.js" type="text/javascript"></script>
    <script src="js/notice.js" type="text/javascript"></script>
    <script src="js/regexp.js" type="text/javascript"></script>
    <script src="js/jweixin-1.2.0.js" type="text/javascript"></script>
    <script src="layer/layer.js"></script>
    <style type="text/css">
        .expPickCont {
            padding-bottom: 20px;
        }

        .expPickCont .expPickIcon {
            width: 15%;
            margin: 0 auto;
            text-align: center;
        }

        .expPickCont .expPicTitle {
            text-align: center;
            font-weight: bold;
        }

        .searchInfoBtn {
            width: 90%;
            margin: 0 auto;
            text-align: center;
            line-height: 46px;
            border-radius: 23px;
            background: #1f72ff;
            color: #fff;
            font-weight: bolder;
        }

        .expUserInfoCont {
            width: 90%;
            margin: 20px auto 20px;
            font-size: 14px;
        }

        .expUserInfoNull {
            width: 100%;
            line-height: 150px;
            text-align: center;
            color: #888888;
            display: none;
        }

        .expInfoCont {
            width: 100%;
            box-sizing: border-box;
            background-color: #fff;
            border-radius: 10px;
            padding: 30px;
        }

        .expInfoCont td:nth-of-type(1) {
            text-align: right;
            height: 2em;
            line-height: 2em;
        }

        .expInfoCont > .btns {
            border-top: 1px dashed #666;
            padding-top: 20px;
            text-align: right;
            margin-top: 10px;
        }

        .btn-success {
            padding: 5px 15px;
            color: #fff;
            background: #2F9925;
            border: 1px solid #fff;
            border-radius: 5px;
        }

        .status2 {
            position: relative;
        }

        .status2_bg {
            position: absolute;
            left: 0px;
            top: 0px;
            bottom: 0px;
            right: 0px;
        }

        .status2_bg > img {
            width: 30%;
            margin: 0 auto;
            margin-top: 50px;
            opacity: 0.5;

        }


        .status1 {
            display: auto;
        }

        .status2 {
            display: none;
        }
    </style>
</head>
<body>
<div class="content">

    <div class="expUserInfoCont" id="expUserInfoCont">
        <div class="expUserInfoNull">
            暂无查到相关信息
        </div>
        <div class="expInfoCont" >
            <table>
                <tr>
                    <td>快递公司：</td><td id="company"></td>
                </tr>
                <tr>
                    <td>快递单号：</td><td id="number"></td>
                </tr>
                <tr>
                    <td>收件人：</td><td id="username"></td>
                </tr>
                <tr>
                    <td>寄件时间：</td><td id="inTime"></td>
                </tr>
                <tr>
                    <td>到件时间：</td><td id="outTime"></td>
                </tr>
                <tr>
                    <td>取件码：</td><td id="code"></td>
                </tr>
            </table>
            <!--<div class="btns">
                <button class="btn-success">确认收货</button>
            </div>-->
        </div>
    </div>
</div>

<script type="text/javascript">

    // 电话号码
    let userPhone;
    let windowLayer = layer.load();
    let number ;
    let url = location.href;
    url = url.split("=");
    // 根据单号渲染快递
    $.getJSON("/wx/findExpressByNum.do",{number:url[url.length-1]},function(data){
        console.log(data);
        layer.close(windowLayer);
        if (data.status == 0){
            layer.msg(data.result);
            // 结果渲染
            $("#company").html(data.data.company);
            $("#number").html(data.data.number);
            $("#outTime").html(data.data.outTime);
            $("#code").html(data.data.code);
            $("#inTime").html(data.data.inTime);
            $("#username").html(data.data.username);
        } else{
            $("#expUserInfoCont").hide();
            layer.msg(data.result);
        }
    })

    // 根据取件码进行确认收货
    function updateStatus(code, type) {
        let load = layer.load();
        $.getJSON("/wx/updateStatus.do", {code: code}, function (data) {
            layer.close(load);
            if (data.status == 0){
                // 刷新快递信息
                $("#expUserInfoCont").html("");
                if (type == 0) {
                    getExpressList();
                }
                layer.msg(data.result)
            } else{
                layer.msg(data.result)
            }
        })

    }

    $("#searchInfoBtn").click(function () {
        let code = $("#expPickUserId").val();
        $("#expUserInfoCont").html("");
        let load = layer.load();
        $.getJSON("/wx/findByCode.do", {code: code}, function (data) {
            layer.close(load);
            if (data.status == 0) {
                $("#expUserInfoCont").html("");
                // 显示快递
                let list = data.data;
                var item = "<div class=\"expInfoCont status1\">\n" +
                    "\t\t\t<table>\n" +
                    "\t\t\t\t<tr>\n" +
                    "\t\t\t\t\t<td>快递公司：</td><td>" + list.company + "</td>\n" +
                    "\t\t\t\t</tr>\n" +
                    "\t\t\t\t<tr>\n" +
                    "\t\t\t\t\t<td>快递单号：</td><td>" + list.number + "</td>\n" +
                    "\t\t\t\t</tr>\n" +
                    "\t\t\t\t<tr>\n" +
                    "\t\t\t\t\t<td>到件时间：</td><td>" + list.inTime + "</td>\n" +
                    "\t\t\t\t</tr>\n" +
                    "\t\t\t\t<tr>\n" +
                    "\t\t\t\t\t<td>取件码：</td><td>" + list.code + "</td>\n" +
                    "\t\t\t\t</tr>\n" +
                    "\t\t\t</table>\n" +
                    "\t\t\t<div class=\"btns\">\n" +
                    "\t\t\t\t<button class=\"btn-success\" onclick=\"updateStatus(" + list.code + ",1)\"'>确认收货</button>\n" +
                    "\t\t\t</div>\n" +
                    "\t\t</div>";
                $("#expUserInfoCont").append($(item));
            } else{
                layer.msg(data.result)
            }
        })
    })


</script>
</body>
</html>